<template>
    <div class="inner">
        <h3>
            <span>销售额统计</span>
            <a href="javascript:;" @click="fn('year')" :class="{ 'active': active == 'year' }">年</a>
            <a href="javascript:;" @click="fn('quarter')" :class="{ 'active': active == 'quarter' }">季</a>
            <a href="javascript:;" @click="fn('month')" :class="{ 'active': active == 'month' }">月</a>
            <a href="javascript:;" @click="fn('week')" :class="{ 'active': active == 'week' }">周</a>
        </h3>
        <div class="line_box">

        </div>
    </div>

</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'MyAppMyLine',

    data() {
            return {
                myCharts: null,
                dataList:{
                    year:[
                        [23,45,111,121,131,90,87,56,329,230,124,100],
                        [43,64,190,210,210,190,187,156,129,130,224,200]
                    ],
                    quarter:[
                        [123,145,211,21,31,190,187,156,129,130,124,300],
                        [43,64,190,210,210,190,187,156,129,130,224,200]
                    ],
                    month:[
                        [43,45,611,121,131,60,87,56,329,230,124,100],
                        [43,64,190,210,210,190,187,156,129,130,224,200]
                    ],
                    week:[
                        [53,45,111,121,31,90,87,56,329,230,124,100],
                        [73,64,190,210,10,190,187,156,129,130,224,200]
                    ]
                },
                data1:[],
                data2:[],
                active:"year",
                timer:null,
                arr:['year','quarter','month','week'],
                num:0
            }
        },
        mounted(){
            this.myCharts=echarts.init(document.querySelector('.line_box'));
            this.data1=this.dataList.year[0]
            this.data2=this.dataList.year[1]
            this.myCharts.setOption(this.getOption())
            this.timer=setInterval(()=>{
                this.num++
                if(this.num>=3){
                    this.num=0
                }
              this.fn(this.arr[this.num])
            },1000)
        },
        methods:{
            fn(act){
                this.active=act;
                // 更改data1 和data2
                this.data1=this.dataList[act][0]
                this.data2=this.dataList[act][1]
                this.myCharts.setOption(this.getOption())
            },
           getOption(){
            return {
                color:['red','#f0f'],
                legend:{
                    right:'10%'
                },
                    grid:{
                    left:0,
                    right:0,
                    top:0,
                    bottom:0,
                    containLabel:true
                },
                tooltip:{
                    trigger:"axis"
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick:{
                    show:false
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine:{
                    lineStyle:{
                        color:"#ddd"
                    }
                    }
                },
                series: [
                    {
                    name:"预期销售额",
                    data: this.data1,
                    type: 'line',
                    smooth: true
                    },
                    {
                    name:"实际销售额",
                    data: this.data2,
                    type: 'line',
                    smooth: true
                    }
                ]
            }
           }
        }
};
</script>

<style lang="scss" scoped>

</style>